<template>
	<div id="main">
		<HeadTop></HeadTop>
		<div id="content">
			<MenuLeft></MenuLeft>
			<div id="contentRigh" class="contentRigh"> 
				<!-- <RouterTitle></RouterTitle> -->
				<BrandNav></BrandNav>
				<router-view></router-view>
				<Foot v-show="footShow"></Foot>
		  </div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import Vue from 'vue'
	import Router from 'vue-router'
	import App from '../App'
 	import HeadTop from '../components/header.vue'
 	import RouterTitle from '../components/title.vue'
 	import BrandNav from '../components/brandNav.vue'
 	import Foot from '../components/footer.vue'
	import MenuLeft from '../components/menu.vue'

	export default{
		components:{HeadTop,RouterTitle,Foot,MenuLeft,BrandNav},
		data(){
			return{
				footShow : false,
				screenWidth: document.body.clientWidth, // 屏幕尺寸
				screenHeihgt: document.body.clientHeight, // 屏幕高度
			}
		},
		methods: {
			getApi(){
				//调取接口方式 get（post同样）-接口名称mock-参数传递：无-成功函数-失败函数（可写可不写）
				this.$api.get("mock",null,r=>{
					console.log("success");
					console.log(r)
				},r=>{
					console.log("fail");
					console.log(r)
				})
			},
			postApi(){
				//调取接口方式 get（post同样）-接口名称mock-参数传递：有-成功函数-失败函数（可写可不写）				
				let data={
					id:55
				};
				this.$api.get("proxy",data,r=>{
					console.log("success");
					console.log(r)
				},r=>{
					console.log("fail");
					console.log(r)
				})
			},
			footerSize(){
	            let windowHeight=$(window).height();
	            let documentHeight=$("#contentRigh>div").eq(1).height();
	            if(documentHeight<windowHeight){
	                // $("footer").css({"position":"fixed"});
	                $("#contentRigh").css("overflow-y","auto");
	            }else{
	                // $("footer").css({"position":"static"});
	                $("#contentRigh").css("overflow-y","scroll");
	            }

			},
            // 鼠标滚轮事件
            handleScroll(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                console.log("scrollTop为:" + scrollTop)
                if(scrollTop > this.screenHeihgt ){
                    this.footShow = true;
                }else{
                    this.footShow = false;
                }
                
            },
		},
		created(){//页面加载之前
			$(window).resize(()=>{
				this.footerSize();
			})
		},
		mounted(){
			//页面加载完之后
			this.footerSize();
			// 滚动监听事件
			window.addEventListener('scroll',this.handleScroll);
			window.onresize = () => {
				const that = this
				return (() => {
				window.screenWidth = document.body.clientWidth;
				that.screenWidth = window.screenWidth;
				
				})()
				
			}
			
			console.log("屏幕高度为：" + this.screenHeihgt)
		},
		// 销毁
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll)
		},
		watch: {
            screenWidth (val) {
                if (!this.timer) {
                    this.screenHeihgt = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // that.screenWidth = that.$store.state.canvasWidth
                        console.log(that.screenHeihgt)
                        that.init()
                        that.timer = false
                    }, 400)
                }
            }
        }
	}
</script>